<template>
  <page>
    <div slot="body">
      <div class="table-operation">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="openDialogHandle('Add', null)"
        >
          添加账号
        </el-button>
        <el-button
          type="success"
          size="small"
          icon="el-icon-edit"
          @click="changPassword()"
          v-if="!adminFlag"
        >
          修改密码
        </el-button>
      </div>
      <el-table :data="tableData" border>
        <el-table-column label="序号" type="index" width="50px" />
        <el-table-column label="姓名" prop="name" />
        <el-table-column label="手机号" prop="phone" />
        <!-- <el-table-column label="密码">******</el-table-column> -->
        <el-table-column label="角色" prop="role" />
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            <span v-if="scope.row.status==0">启用</span>
            <span v-if="scope.row.status==1">停用</span>
          </template>
        </el-table-column>
        <el-table-column label="添加时间" prop="createTime" width="200px"/>
        <el-table-column label="操作" width="100px">
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="openDialogHandle('Edit', scope.row)"
              >编辑
            </el-link>
            <el-link
              type="primary"
              :underline="false"
              @click="handleDelete(scope.row)"
              >删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer">
      <el-pagination
        background
        :page-size="pageVO.pageSize"
        :current-page.sync="pageVO.pageNum"
        :total="pageVO.total"
        :layout="pageOptions.layout"
        :page-sizes="pageOptions.pageSizes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <managementDialog ref="dialogRef" @getList="getTableData"/>
    <el-dialog title="修改密码" :close-on-click-modal="false" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
        <el-form-item label="原密码" prop="password">
          <el-input v-model="form.password" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="form.newPassword" />
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input v-model="form.confirmPassword" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitProdForm">确 定</el-button>
        <el-button @click="open=false">取 消</el-button>
      </div>
    </el-dialog>
  </page>
</template>
<script>
import managementDialog from "./managementDialog.vue";
import pageQuery from "../../mixins/pageQuery";
import {getList,deleteUser,changePassword} from '@/api/user'
export default {
  mixins: [pageQuery],
  components: {
    managementDialog,
  },
  data() {
    var validateCheckPass=(rule, value, callback) =>{
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      tableData: [],
      open:false,
      adminFlag:'',
      form:{},
      pageVO:{
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      rules: {
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
        newPassword: [{ required: true, message: '新密码不能为空', trigger: 'blur' }],
        confirmPassword:[{ required: true, validator: validateCheckPass, trigger: 'blur' }],
      },
    };
  },
  created(){
    this.getTableData()
    this.adminFlag=this.$store.state.user.adminFlag
  },
  methods: {
    getTableData(){
      const parmas={
        pageNo:this.pageVO.pageNum,
        pageSize:this.pageVO.pageSize
      }
      getList(parmas).then(res=>{
        this.tableData=res.data.data;
        this.tableData.map((item)=>{
          item.roles[0]?item.role=item.roles[0].name:''
        })
        this.pageVO.total=res.data.total
      })
    },
    handleDelete(row){
      this.$confirm('是否确认删除用户为"' + row.name + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return deleteUser(row.id);
      }).then(() => {
        this.getTableData();
        this.$message.success("删除成功");
      })
    },
    changPassword(){
      this.open=true
      this.form={}
    },
    submitProdForm(){
      this.$refs['form'].validate(valid => {
        if (valid) {
          let parmas={
            id:this.$store.state.user.userId,
            newPassword:this.form.newPassword,
            password:this.form.password
          }
          changePassword(parmas).then(res=>{
            if(res.success){
              this.$message.success('修改密码成功');
              this.open=false
            }
          })
        }
      });
    }
  },
};
</script>
